<template>
  <el-dialog :title="titleName" :visible.sync="dialogVisible" custom-class="custom_dialog" :close-on-click-modal="false"
             :modal-append-to-body="false" width="40%" :before-close="onClose">

    <div class="editContent">
      <el-form :inline="true" :rules="userRoleRules" ref="userRole" :model="userRole" label-width="100px"
               label-position="right">

        <el-form-item label="用户名" class="form-item">
          <el-input placeholder="用户名" v-model="userName" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="角色" class="form-item" prop="roleId">
          <el-select v-model="userRole.roleId" multiple placeholder="请选择角色" clearable>
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.roleNm"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>

    <div style="text-align: center">
      <el-button type="danger" @click="onClose" icon="el-icon-close">取消</el-button>
      <el-button type="primary" @click="onSubmit('userRole')" icon="el-icon-check">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import api from '@/api/sysRole'
  import apiUserRole from '@/api/sysUser'

  export default {
    name: 'user-role',
    data() {
      return {
        titleName: '',
        dialogVisible: false,
        userRole: {
          // 用户ID
          userId: '',
          // 角色ID
          roleId: []
        },
        // 用户名
        userName: '',
        // 角色下拉框
        roleList: [],
        userRoleRules: {
          roleId: [{ required: true, message: '请选择角色', trigger: 'blur' }]
        }

      }
    },
    methods: {
      // 打开界面
      open(row) {
        this.titleName = '设置角色'
        this.userRole.userId = row.id
        this.userName = row.userName
        this.dialogVisible = true
        // 获取角色
        this.getRole()
        // 回显角色
        this.getRoleByUserId(this.userRole.userId)
      },
      getRole() {
        var me = this
        api.getRole().then(response => {
          if (response.status === 200) {
            me.roleList = response.data
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        })
      },

      getRoleByUserId(userId) {
        var me = this
        me.userRole.userId = userId
        api.getRoleByUserId( me.userRole).then(response => {
          if (response.status === 200) {
            var role = response.data
            role.forEach(function(roleId) {
              me.userRole.roleId.push(roleId.roleId)
            })
          } else {
            me.$message({ message: response.msg, type: 'error' })
          }
        })
      },
      // 提交
      onSubmit(userRole) {
        var me = this
        me.$refs[userRole].validate((valid) => {
          if (valid) {
            apiUserRole.setRole(me.userRole).then(response => {
              if (response.status === 200) {
                me.$message({ message: response.msg, type: 'success' })
                me.onClose()
              } else {
                me.$message({ message: response.msg, type: 'error' })
              }
            })
          } else {
            return false
          }
        })
      },
      // 关闭
      onClose() {
        // 清空表单
        this.$refs['userRole'].resetFields()
        this.userInfo = {}
        //清空校验数据
        this.$refs['userRole'].clearValidate()
        this.dialogVisible = false
        this.$emit('closeHide', false)

      }
    }
  }
</script>

<style scoped>

</style>
